<!--Breadcrumb-->
<!--<div class="breadcrumb clearfix">
        <a href="#">Right Choice</a><a href="#">Formal Dresses</a><span>Satin Ruched Ankle Dress</span>
</div>-->
<!--Start Left Column-->
<div class="left-column span3 ml-0 fl">
        <h4 class="block-title">Danh mục sản phẩm</h4>
        <div class="ruler">
        </div>
        <ul class="categories">
        <?php 
            $listMenuNav = Category::model()->getMenuNav();
            if($listMenuNav){
                foreach ($listMenuNav as $value) {
                    ?>
                    <li>
                        <i class="icon-angle-right"></i>
                        <a href="<?php echo $this->createUrl('/product/list', array('id' => $value->id))?>"><?php echo $value->name ?></a>
                        <?php
                            $listMenuSub1 = Category::model()->getMenuSub($value->id, $value->level+1);
                            if($listMenuSub1){
                                echo "<ul class='categories-submenu'>";
                                foreach ($listMenuSub1 as $value1) {
                                    echo "<li>";
                                    echo "<i class='icon-angle-right'></i><a href='".$this->createUrl("/product/list", array("id" => $value1->id))."'>".$value1->name."</a>";
                                    $listMenuSub2 = Category::model()->getMenuSub($value1->id, $value1->level+1);
                                    if($listMenuSub2){
                                        echo "<ul class='categories-submenu'>";
                                        foreach ($listMenuSub2 as $value2) {
                                            echo "<li><i class='icon-angle-right'></i><a href='".$this->createUrl("/product/list", array("id" => $value2->id))."'>".$value2->name."</a></li>";
                                        }
                                        echo "</ul>";
                                    }
                                    echo "</li>";
                                }
                                echo "</ul>";
                            }
                        ?>
                        
                    </li>
                    <?php
                }
            }
        ?>
    </ul>

</div>
<!--End Left Column-->
<!--Start Right Content Block-->
<div class="span9 fr">
        <div class="products-details clearfix row-fluid">
                <div class="product-image span4 clearfix fl">
                        <div class="targetarea">
                            <img id="multizoom1" class="zoom_01" title="" src="<?php echo Yii::app()->getBaseUrl().$model->avatar?>" data-zoom-image="<?php echo Yii::app()->getBaseUrl().$model->avatar_resize;?>"/>
                        </div>
                        <div id="description">
                        </div>
                </div>
                <div class="product-information fr">
                        <h4><?php echo $model->name;?></h4>
                        <div class="stars">
                                <span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span>
                        </div>
                        <h2 class="clearfix"><?php echo number_format($model->price, 0, "", ".") ?> VNĐ</h2>
                        <div class="clearfix mt-10">
                                <div class="button-box fl">
                                        <div>
                                                <i class="icon-shopping-cart"></i>
                                                <span>Add to cart</span>
                                        </div>
                                </div>
                        </div>
                        <div class="clearfix mt-10">
                                <div class="icon-socials">
                                        <a href="#" class="fl"><i class="icon-facebook icon-2x"></i></a>
                                        <a href="#" class="fl"><i class="icon-twitter icon-2x"></i></a>
                                        <a href="#" class="fl"><i class="icon-linkedin icon-2x"></i></a>
                                        <a href="#" class="fl"><i class="icon-rss icon-2x"></i></a>
                                </div>
                        </div>
                </div>
        </div>
        <div class="product-additional-info">
                <ul>
                        <li><a href="#t-description">Mô tả sản phẩm</a></li>
                        <li><a href="#t-reviews">Bình luận</a></li>
                        <li><a href="#f-reviews">Bình luận facebook</a></li>
                </ul>
                <div id="t-description">
                        <p>
                                <?php
                                    if($model->description)
                                        echo $model->description; 
                                    else {
                                        echo "Hiện chưa có thông tin về sản phẩm này.";
                                    }
                                ?>
                        </p>
                </div>
                
                <div id="t-reviews" class="clearfix">
                        <div class="span3 ml-0">
                                <div class="review">
                                        <div class="stars fr">
                                                <span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span>
                                        </div>
                                        <div class="review-header">
                                                <h5>John Doe</h5>
                                                <small>26/11/2012</small>
                                        </div>
                                        <!--end review-header-->
                                        <div class="review-body">
                                                <p>
                                                        Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
                                                </p>
                                        </div>
                                        <!--end review-body-->
                                </div>
                                <div class="review">
                                        <div class="stars fr">
                                                <span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span>
                                        </div>
                                        <div class="review-header">
                                                <h5>John Doe</h5>
                                                <small>26/11/2012</small>
                                        </div>
                                        <!--end review-header-->
                                        <div class="review-body">
                                                <p>
                                                        Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
                                                </p>
                                        </div>
                                        <!--end review-body-->
                                </div>
                        </div>
                        <div class="span3">
                                <form method="post" action="http://mosaicdesign.uz/rc/page" class="form-horizontal form-review">
                                        <div class="control-group">
                                                <label class="control-label" for="inputName">Your Name <span class="text-error">*</span></label>
                                                <div class="controls">
                                                        <input type="text" name="#" id="inputName" placeholder="John Doe...">
                                                </div>
                                        </div>
                                        <div class="control-group">
                                                <label class="control-label" for="inputReview">Your Review <span class="text-error">*</span></label>
                                                <div class="controls">
                                                        <textarea name="#" id="inputReview" placeholder="Put your review here..." rows="5"></textarea>
                                                </div>
                                        </div>
                                        <div class="control-group">
                                                <label class="control-label">Your Rate <span class="text-error">*</span></label>
                                                <div class="controls">
                    <div class="stars fl">
                        <span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span>
                    </div>
                </div>
                                        </div>
                                        <div class="control-group">
                                                <div class="controls">
                                                        <button type="submit" class="btn btn-danger" name="submit">Add Review</button>
                                                </div>
                                        </div>
                                </form>
                        </div>
                </div>
            <div id="f-reviews" class="clearfix">
                <div class="span3 ml-0">
                    <div id="fb-root"></div>
                    <div class="fb-comments" data-href="http://example.com/comments" data-numposts="5"></div>
                </div>
            </div>
        </div>
</div>
                
<div id="toTop">
        <i class="icon-double-angle-up icon-4x"></i>
</div>

<script type="text/javascript">
//<![CDATA[
	jQuery(document).ready(function($){
		$( '#multizoom1').addimagezoom({ // multi-zoom: options same as for previous Featured Image Zoomer's addimagezoom unless noted as '- new'
			descArea: '#description', // description selector (optional - but required if descriptions are used) - new
			speed: 1500, // duration of fade in for new zoomable images (in milliseconds, optional) - new
			descpos: false, // if set to true - description position follows image position at a set distance, defaults to false (optional) - new
			imagevertcenter: true, // zoomable image centers vertically in its container (optional) - new
			magvertcenter: false, // magnified area centers vertically in relation to the zoomable image (optional) - new
			zoomrange: [3, 3],
			magnifiersize: [350,450],
			magnifierpos: 'right',
			cursorshadecolor: '#fdffd5',
			cursorshade: true //<-- No comma after last option!
		});
	});
//]]>
</script>
<script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        console.log(js);
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=638949436155109";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    
    $('.zoom_01').elevateZoom({
        cursor: "crosshair",
        zoomWindowFadeIn: 500,
        zoomWindowFadeOut: 750
   });
</script>